import React, { useEffect, useState } from "react";
import { Tabs } from "antd-mobile";
import { getShopList } from "../../api";
export default function Classify(props: any) {
	const [shopList, setShopList] = useState([]);
	// didMount
	useEffect(() => {
		getList(1);
	}, []);
	const getList = (type: any) => {
		getShopList({ pageIndex: 1, pageSize: 10, type }).then((res: any) => {
			setShopList(res);
		});
	};
	return (
		<div>
			<Tabs onChange={getList}>
				<Tabs.TabPane title="布艺" key="1">
					布艺
				</Tabs.TabPane>
				<Tabs.TabPane title="被枕" key="2">
					被枕
				</Tabs.TabPane>
				<Tabs.TabPane title="床品" key="3">
					床品
				</Tabs.TabPane>
				<Tabs.TabPane title="灯具" key="4">
					灯具
				</Tabs.TabPane>
				<Tabs.TabPane title="地垫" key="5">
					地垫
				</Tabs.TabPane>
			</Tabs>
			<main>
				{shopList.map((item: any) => {
					return (
						<div
							key={item.id}
							onClick={() => {
								props.history.push("/detail/" + item.id);
							}}
						>
							<div className="left">
								<img src={item.image} alt="" />
							</div>
							<div className="right">
								<div className="title">{item.name}</div>
							</div>
						</div>
					);
				})}
			</main>
		</div>
	);
}
